<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search">
      </el-input>
      <el-button type="primary" @click="getSearchList">查询</el-button>
    </div>
    <div class="ctable">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column fixed prop="username" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="100">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="100">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="flag" label="禁用解禁" width="120">
          <template #default="scope">
            <el-button @click="handleFlag(scope.row.id)" v-if="scope.row.flag === true" type="success"
              size="small">禁用</el-button>
            <el-button @click="handleFlag(scope.row.id)" v-else type="danger" size="small">解禁</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button @click="handleReset(scope.row.id)" type="primary" size="small">重置密码</el-button>
            <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
const search = ref('');
const userList = ref([]);
import axios from 'axios'

const instance = getCurrentInstance();

onMounted(() => {
  getList();
});

const getList = () => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'));
  instance.proxy.$api.get(`/users/backend/list?id=${userinfo.id}`).then(res => {
    if (res.data.code === 1) {
      userList.value = res.data.list;
    }
  });
};

const getSearchList = () => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'));
  instance.proxy.$api.get(`/users/backend/search?id=${userinfo.id}&searchStr=${search.value}`).then(res => {
    if (res.data.code === 1) {
      userList.value = res.data.list;
    }
  });
};

const handleDelete = (id) => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'))
  instance.proxy.$api.post('/users/backend/del', { id: userinfo.id, uid: id }).then(res => {
    if (res.data.code === 1) {
      alert(res.data.message)
      getList()
    } else {
      alert('删除失败')
    }
  })
}
const handleFlag = (id) => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'))
  instance.proxy.$api.post('/users/backend/flag', { id: userinfo.id, uid: id }).then(res => {
    if (res.data.code === 1) {
      alert(res.data.message)
      getList()
    } else {
      alert('操作失败')
    }
  })
}
const handleReset = (id) => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'))
  instance.proxy.$api.post('/users/backend/reset', { id: userinfo.id, uid: id }).then(res => {
    if (res.data.code === 1) {
     alert(res.data.message)
      getList()
    } else {
      alert('操作失败')
    }
  })
}
</script>

<style scoped>
.search {
  display: flex;
  align-items: center;
  margin: 24px;
  width: 500px;
}

.ctable {
  margin: 0 24px 24px;
}
</style>